﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Metropolis - Blog</title>
        <meta name="description" content="Multipurpose HTML5 Themplate">
        <meta name="author" content="pixel-industry">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">


        <!-- stylesheets -->
        <link rel="stylesheet" href="/css/basic.css" />
        <link rel="stylesheet" href="/css/style.css" />   
        <link rel="stylesheet" href="/css/responsive.css" />  
        <link rel="stylesheet" href="/css/red.css" />

        <!-- Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic' rel='stylesheet' type='text/css'>

        <!-- Icons -->
        <link rel="stylesheet" href="/pixons/style.css" />
        <link rel="stylesheet" href="/font-awesome//css/font-awesome.min.css" />
        
        <link rel="stylesheet" href="/style-switcher/styleSwitcher.css" media="screen" />

        <!--[if lt IE 9]>
            <script src="/js/html5shiv.js"></script>
        <![endif]-->
        
        <!--[if lt IE 9]>
            <script src="/js/selectivizr-min.js"></script>
        <![endif]-->
        
        <!--[if IE 8]>
            <link rel="stylesheet" href="/css/ie8.css" media="screen" />
        <![endif]-->
    </head>

    <body>
         <!-- style switcher start -->
        <section id="style-switcher">
            <section id="styles-container">
                <section>
                    <h6>Layouts</h6>
                    <ul class="skin-list">
                        <li class="metropolis-default"><a href="../metropolis-default/blog-single.html">Default</a></li>
                        <li class="metropolis-clean active"><a href="#">Clean & Minimal</a></li>
                        <li class="metropolis-blue"><a href="../metropolis-blue/blog-single.html">Creative Blue</a></li>
                    </ul>
                </section>

                <section class="first">
                    <h6>Color Style</h6>
                    <p>Which theme color you want to use? Here are some predefined colors.</p>
                    <ul class="styles-list">
                        <li class="blue">1</li>
                        <li class="green">2</li>
                        <li class="orange">3</li>                        
                        <li class="red">4</li>
                        <li class="yellow">5</li>
                    </ul>
                </section>
            </section>
            <a href="#" id="styles-button"><div id="switcher-logo"></div></a>
        </section><!-- style switcher end -->
        
        <!-- #header-wrapper start -->
        <section id="header-wrapper" class="clearfix">
            <!-- #header start -->
            <header id="header" class="clearfix">

                <!-- #logo start -->
                <section id="logo">
                    <a href="index.html">
                        <img src="/img/red/logo.png" alt="logo" />
                    </a>
                </section><!-- #logo end -->

                <!-- contact-info-container -->
                <section id="contact-info-container">
                    <ul class="info">
                        <li>
                            <span class="text-dark">Call us on:</span> +00 123 5874
                        </li>

                        <li>
                            <span class="text-dark">Email: </span>
                            <a class="text-color" href="malito:sales-info@business.com">sales-info@business.com</a>
                        </li>
                    </ul>

                    <ul class="social-links">
                        <li>
                            <a href="#" class="pixons-twitter-1"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-linkedin"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-facebook-1"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-xing"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-skype"></a>
                        </li>
                    </ul>
                </section><!-- .contact-info-container end -->
            </header><!-- #header end -->

            <!-- #nav-container start -->
            <section id="nav-container">

                <section class="container_12">
                    <section class="grid_12">
                        <!-- #nav start -->
                        <nav id="nav">
                            <ul>
                                <li>
                                    <span class="nav-icon icon-home"></span>
                                    <a href="index.html">Home</a>
                                </li>

                                <li>
                                    <span class="nav-icon icon-user"></span>
                                    <a href="#">Pages</a>
                                    <ul>
                                        <li><a href="about.html">About</a></li>
                                        <li><a href="services.html">Services</a></li>
                                        <li><a href="faq.html">FAQ</a></li>
                                        <li><a href="page-sidebar-left.html">Page sidebar left</a></li>
                                        <li><a href="page-sidebar-right.html">Page sidebar right</a></li>
                                        <li><a href="pricing.html">Pricing tables</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-camera"></span>
                                    <a href="#">Portfolio</a>
                                    <ul>
                                        <li><a href="portfolio1.html">Portfolio 1</a></li>
                                        <li><a href="portfolio2.html">Portfolio 2</a></li>
                                        <li><a href="portfolio2-alt.html">Portfolio 2 alternative</a></li>
                                        <li><a href="portfolio3.html">Portfolio 3</a></li>
                                        <li><a href="portfolio3-alt.html">Portfolio 3 alternative</a></li>
                                        <li><a href="portfolio4.html">Portfolio 4</a></li>
                                        <li><a href="portfolio4-alt.html">Portfolio 4 alternative</a></li>
                                        <li><a href="portfolio-gallery.html">Portfolio gallery</a></li>
                                        <li><a href="portfolio-single.html">Portfolio single</a></li>
                                    </ul>
                                </li>

                                <li class="current-menu-item">
                                    <span class="nav-icon icon-list"></span>
                                    <a href="#">Blog</a>

                                    <ul>
                                        <li><a href="blog.html">Blog default</a></li>
                                        <li><a href="blog-alt.html">Blog alternative</a></li>
                                        <li class="current-menu-item"><a href="blog-single.html">Blog single</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-cogs"></span>
                                    <a href="#">Shortcodes</a>
                                    <ul>
                                        <li><a href="shortcodes.html">Page elements</a></li>
                                        <li><a href="#">Third level</a>
                                            <ul>
                                                <li><a href="#">Menu item</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-map-marker"></span>
                                    <a href="contact.html">Contact</a>
                                </li>
                            </ul>
                        </nav><!-- #nav end -->
                        
                        <!-- responsive navigation start -->
                        <select id="nav-responsive">
                            <option selected="" value="">Site Navigation...</option>

                            <option value="index.html">Home version 1</option>

                            <option value="about.html">About us</option>
                            <option value="services.html">Services</option>
                            <option value="faq.html">FAQ Page</option>
                            <option value="page-sidebar-left.html">Page sidebar left</option>
                            <option value="page-sidebar-right.html">Page sidebar right</option>
                            <option value="pricing.html">Pricing tables</option>

                            <option value="portfolio1.html">Portfolio 1 column</option>
                            <option value="portfolio2.html">Portfolio 2 columns</option>
                            <option value="portfolio2-alt.html">Portfolio 2 alternative</option>
                            <option value="portfolio3.html">Portfolio 3 columns</option>
                            <option value="portfolio3-alt.html">Portfolio 3 alternative</option>
                            <option value="portfolio4.html">Portfolio 4 columns</option>
                            <option value="portfolio4-alt.html">Portfolio 4 alternative</option>
                            <option value="portfolio-gallery.html">Portfolio gallery</option>
                            <option value="portfolio-single.html">Portfolio single</option>

                            <option value="blog.html">Blog default</option>
                            <option value="blog-alt.html">Blog alternative</option>
                            <option value="blog-single.html">Blog single</option>

                            <option value="shortcodes.html">Shortcodes</option>
                            <option value="contact.html">Contact</option>
                        </select><!-- responsive navigation end -->

                        <section id="search-box">
                            <form action="#" method="get">
                                <input id="m_search" name="s" type="text" placeholder="Type and hit enter..." />
                                <input class="search-submit" type="submit" />
                            </form>
                        </section>
                    </section><!-- .grid_12 end -->
                </section><!-- .container_12 end -->

            </section><!-- #nav-container end -->
        </section><!-- #header-wrapper start -->

        <!-- .top-shadow -->
        <div class="top-shadow"></div>

        <!-- .page-title-container start -->
        <section class="page-title-container">

            <!-- .container_12 start -->
            <div class="container_12">

                <!-- .page-title start -->
                <div class="page-title grid_12">
                    <div class="title">
                        <h1>Blog</h1>
                    </div>

                    <ul class="breadcrumbs">
                        <li><a  class="home" href="#">Home</a></li>
                        <li>/</li>
                        <li><span class="active">Blog</span></li>
                    </ul>
                </div><!-- .page-title end -->
            </div><!-- .container_12 end -->
        </section><!-- .page-title-container end -->

        <!-- #content-wrapper start -->
        <section id="content-wrapper">
            <div class="container_12">

                <!-- .grid_8 .blog-posts start -->
                <ul class="grid_8 blog-posts">

                    <!-- .blog-post .format standard sticky  start -->
                    <li class="blog-post format-standard clearfix">
                        
                        <!-- .blog-meta start -->
                        <section class="blog-meta">
                            <div class="category">
                                <i class="icon-edit"></i>
                            </div>

                            <ul>
                                <li>
                                    <span class="text-dark">Posted: </span>Apr 28, 2013
                                </li>

                                <li>
                                    <span class="text-dark">By: </span>
                                    <a href="#">Admin</a>
                                </li>

                                <li>
                                    <span class="text-dark">Comments: </span>
                                    <a href="blog-single.html">2</a>
                                </li>
                            </ul>
                        </section><!-- .blog-meta end -->

                        <!-- post-body-container start -->
                        <article class="post-body-container">
                            
                            <!-- .post-body start -->
                            <section class="post-body">
                                <a href="blog-single.html" class="post-img">
                                    <img src="/img/blog/blog-1.jpg" width="490" alt="blog image">
                                </a>

                                <a href="blog-single.html">
                                    <h3>Standard Blog Post With Image</h3>
                                </a>

                                <ul class="tags">
                                    <li>
                                        <span class="text-dark">Tags: </span>
                                    </li>
                                    <li>
                                        <a href="#">standard, </a>
                                    </li>
                                    <li>
                                        <a href="#">photo, </a>
                                    </li>
                                    <li>
                                        <a href="#">sticky, </a>
                                    </li>
                                    <li>
                                        <a href="#">category, </a>
                                    </li>
                                    <li>
                                        <a href="#">blog</a>
                                    </li>
                                </ul>

                                <p>
                                    Lorem ipsum dolor sit amet nec, consectetuer 
                                    adipiscing elit. Aenean commodo ligula eget 
                                    dolor. Aenean massa. Cum sociis natoque 
                                    penatibus et magnis dis parturient montes. 
                                    Lorem ipsum dolor sit amet nec, consectetuer 
                                    adipiscing elit. Aenean commodo ligula eget 
                                    dolor.
                                </p>

                                <blockquote>
                                    Quisque odio urna, ultrices non volutpat 
                                    lacinia, scelerisque sit amet justo. Quisque 
                                    venenatis sapien id eros pulvinar sit amet 
                                    posuere lacus gravida. Aenean accumsan placerat 
                                    nulla, dictum semper turpis scelerisque sit amet.

                                    <cite>- Mathew, business.com</cite>
                                </blockquote>

                                <p>
                                    It is a long established fact that a reader will 
                                    be distracted by the readable content of a page 
                                    when looking at its layout. The point of using 
                                    Lorem Ipsum is that it has a more-or-less normal 
                                    distribution of letters, as opposed to using 
                                    'Content here, content here', making it look 
                                    like readable English. Many desktop publishing 
                                    packages and web page editors now use Lorem 
                                    Ipsum as their default model text, and a search 
                                    for 'lorem ipsum' will uncover many web sites 
                                    still in their infancy. Various versions have 
                                    evolved over the years, sometimes by accident, 
                                    sometimes on purpose (injected humour and the 
                                    like).
                                </p>
                            </section><!-- .post-body end -->

                            <!-- .share-post start -->
                            <article class="share-post">
                                <span>Share this post:</span>
                                <div id="shareme" data-url="http://sharrre.com/"></div>
                            </article><!-- share-post end -->

                            <!-- .post-author start -->
                            <article class="post-author">
                                <section class="section-title">
                                    <h3>About the Author</h3>
                                </section>

                                <img src="/img/blog/author.jpg" alt="post author" />

                                <div class="info">
                                    <h6>Melissa Stark</h6>

                                    <p>
                                        Voulpat dolor sit amet, consectetuer 
                                        adipiscing elit. Sed diam nonummy nibh 
                                        euismod tincidunt ut laoreet dolore magna 
                                        aliquam erat volutpat.
                                    </p>
                                </div>

                            </article><!-- .post-author end -->

                            <!-- .post-comments -->
                            <article class="post-comments">
                                <section class="section-title">
                                    <h3>Comments</h3>
                                </section>

                                <!-- comments-li start -->
                                <ul class="comments-li">
                                    <li> 
                                        <article class="comment">
                                            <div class="avatar">
                                                <img src="/img/blog/comment.jpg" alt="author" />
                                            </div>

                                            <ul class="comment-meta">
                                                <li>
                                                    <a href="#" class="author">Mark </a> 
                                                </li>

                                                <li>
                                                    January 02nd, 2013 at 12:05 am 
                                                </li>
                                            </ul>

                                            <div class="comment-body">
                                                <p>
                                                    Lorem ipsum dolor sit amet, onsectetuer 
                                                    dipiscing elit, sed diam nonummy nibh 
                                                    euismod tincidunt ut laoreet dolore 
                                                    magna aliquam erat volutpat. 
                                                </p>

                                                <a class="comment-reply-link">
                                                    Reply
                                                </a>
                                            </div>                                        
                                        </article><!-- comment end -->

                                        <!-- second level comment -->
                                        <ul class="children">
                                            <li>
                                                <article class="comment">
                                                    <div class="avatar">
                                                        <img src="/img/blog/comment.jpg" alt="author" />
                                                    </div>

                                                    <ul class="comment-meta">
                                                        <li>
                                                            <a href="#" class="author">Mark </a> 
                                                        </li>

                                                        <li>
                                                            January 12th, 2013 at 10:01 am
                                                        </li>
                                                    </ul>

                                                    <div class="comment-body">
                                                        <p>
                                                            Lorem ipsum dolor sit amet, 
                                                            consectetuer adipiscing elit, 
                                                            sed diam nonummy nibh 
                                                            euismod tincidunt ut laoreet 
                                                            dolore magna aliquam erat 
                                                            volutpat. 
                                                        </p>

                                                        <a class="comment-reply-link">
                                                            Reply
                                                        </a>
                                                    </div>                                        
                                                </article><!-- .comment end -->

                                                <!-- second level comment -->
                                                <ul class="children">
                                                    <li>
                                                        <article class="comment">
                                                            <div class="avatar">
                                                                <img src="/img/blog/comment.jpg" alt="author" />
                                                            </div>

                                                            <ul class="comment-meta">
                                                                <li>
                                                                    <a href="#" class="author">Mark </a> 
                                                                </li>

                                                                <li>
                                                                    January 29th, 2013 at 08:16 am
                                                                </li>
                                                            </ul>

                                                            <div class="comment-body">
                                                                <p>
                                                                    Lorem ipsum dolor sit amet, 
                                                                    consectetuer adipiscing elit, 
                                                                    sed diam nonummy nibh 
                                                                    euismod tincidunt ut laoreet 
                                                                    dolore magna aliquam erat 
                                                                    volutpat. 
                                                                </p>

                                                                <a class="comment-reply-link">
                                                                    Reply
                                                                </a>
                                                            </div>                                        
                                                        </article><!-- .comment end -->
                                                    </li><!-- li end -->
                                                </ul><!-- .children end -->
                                            </li><!-- li end -->
                                        </ul><!-- children end -->
                                    </li><!-- post comments list item end -->

                                    <li>
                                        <article class="comment">
                                            <div class="avatar">
                                                <img src="/img/blog/comment.jpg" alt="author" />
                                            </div>

                                            <ul class="comment-meta">
                                                <li>
                                                    <a href="#" class="author">Mark </a> 
                                                </li>

                                                <li>
                                                    February 15th, 2013 at 06:56 pm
                                                </li>
                                            </ul>

                                            <div class="comment-body">
                                                <p>
                                                    Lorem ipsum dolor sit amet, onsectetuer 
                                                    dipiscing elit, sed diam nonummy nibh 
                                                    euismod tincidunt ut laoreet dolore 
                                                    magna aliquam erat volutpat. 
                                                </p>

                                                <a class="comment-reply-link">
                                                    Reply
                                                </a>
                                            </div>                                        
                                        </article><!-- .comment end -->
                                    </li><!-- li end -->
                                </ul><!-- comments-li end -->
                            </article><!-- .post-comments end -->

                            <!-- .comment-form start -->
                            <section class="comment-form">
                                <div id="respond">
                                    <h5 id="reply-title">Leave a comment</h5>

                                    <p>
                                        Hey, so you decided to leave a comment! 
                                        That’s great. Just fill in the required 
                                        fields and hit submit. Note that your 
                                        comment will need to be reviewed before 
                                        it’s published.
                                    </p>

                                    <form id="commentform">
                                        <fieldset class="name-container">
                                            <label><span class="text-color">*</span> Name:</label>
                                            <input name="author" id="comment-name" type="text">
                                        </fieldset>

                                        <fieldset class="email-container">
                                            <label><span class="text-color">*</span> Email:</label>
                                            <input name="email" id="comment-email" type="email">
                                        </fieldset>

                                        <fieldset class="message">
                                            <label><span class="text-color">*</span> Message:</label>
                                            <textarea name="comment" id="comment-message" rows="8"></textarea>
                                        </fieldset>
                                        <input id="comment-reply" type="submit" value="Submit">

                                    </form>
                                    <div id="comment-response"></div>
                                </div><!-- 3respond end -->
                            </section><!-- .comment-form end -->
                        </article><!-- post-body-container end -->

                    </li><!-- .blog-post .standard .stiky end -->
                </ul><!-- .grid_8 .blog-posts end -->

                <!-- aside right start -->
                <aside class="grid_4 aside-right">

                    <!-- .widget start -->
                    <ul class="aside_widgets">

                        <!-- .widget_search start -->
                        <li class="widget widget_search">
                            <div class="title">
                                <h5>search</h5>
                            </div>

                            <form action="#" method="get">
                                <input id="a_search" name="s" type="text" placeholder="Type and hit enter..." />
                                <input class="search-submit" type="submit" />
                            </form>
                        </li><!-- .widget_search end -->

                        <!-- .widget_categories start -->
                        <li class="widget widget_categories">
                            <div class="title">
                                <h5>blog categories</h5>
                            </div>

                            <ul>
                                <li><a href="blog-single.html">Design and development (6)</a></li>
                                <li><a href="blog-single.html">Wordpress themes (5)</a></li>
                                <li><a href="blog-single.html">Company news (3)</a></li>
                                <li><a href="blog-single.html">Print design (1)</a></li>
                                <li><a href="blog-single.html">The best of photography (2)</a></li>
                                <li><a href="blog-single.html">Learning jQuery (5)</a></li>
                            </ul>  
                        </li><!-- .widget_recent_entries end -->

                        <!-- .widget_recent_entries start -->
                        <li class="widget pi_recent_posts">
                            <div class="title">
                                <h5>latest posts</h5>
                            </div>

                            <ul class="footer-blog">
                                <li>
                                    <div class="meta">
                                        <a class="icon-edit"></a>
                                    </div>

                                    <div class="post">
                                        <a href="blog-single.html"> Nam libero tempore, </a>
                                        <p class="info">26 MARCH 2013, <a href="blog-single.html">0 COMMENTS</a></p>
                                    </div>
                                </li>

                                <li>
                                    <div class="meta">
                                        <a class="icon-link"></a>
                                    </div>

                                    <div class="post">
                                        <a href="blog-single.html">Temporibus autem quibusdam, </a>
                                        <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                    </div>
                                </li>

                                <li>
                                    <div class="meta">
                                        <a class="icon-camera"></a>
                                    </div>

                                    <div class="post">
                                        <a href="blog-single.html">Excepteur sint occaecat cupid, </a>
                                        <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                    </div>
                                </li>
                            </ul>
                        </li><!-- .widget_recent_entries end -->

                        <!-- pi_testimonial -->
                        <li class="widget pi_testimonial">
                            <div class="title">
                                <h5>testimonials</h5>
                            </div>

                            <section class="carousel-testimonial">
                                <ul id="foo2" class="carousel-li">
                                    <li>
                                        <p class="content">
                                            Lorem ipsum dolor sit amet, 
                                            consectetuer adipiscing elit, 
                                            sed diam nonummy nibh euismod 
                                            tincidunt ut laoreet dolore magna 
                                            aliquam erat volutpat. Ut wisi enim 
                                            ad minim veniam, quis nostrud.
                                        </p>

                                        <span class="author">- John Doe, business.com</span>
                                    </li>

                                    <li>
                                        <p class="content">
                                            Sed ut perspiciatis unde omnis iste natus error 
                                            sit voluptatem accusantium doloremque laudantium, 
                                            totam rem aperiam, eaque ipsa quae ab illo 
                                            inventore veritatis et quasi. 
                                        </p>

                                        <span class="author">- Mathew, business.com</span>
                                    </li>

                                    <li>
                                        <p class="content">
                                            Lorem ipsum dolor sit amet nec, 
                                            consectetuer adipiscing elit. Aenean 
                                            commodo ligula eget dolor. Aenean
                                            massa. Cum sociis natoque penatibus 
                                            et magnis dis parturient montes. 
                                            Lorem ipsum dolor sit amet nec, 
                                            consectetuer adipiscing elit. 
                                            Aenean commodo ligula eget dolor. 
                                        </p>

                                        <span class="author">- John Stark, business.com</span>
                                    </li>
                                </ul>
                            </section>
                        </li><!-- pi_testimonial end -->

                        <!-- .widget_tag_cloud start -->
                        <li class="widget widget_tag_cloud">
                            <div class="title">
                                <h5>popular searches</h5>
                            </div>

                            <div class="tagcloud">
                                <a href="blog-single.html">responsive</a>
                                <a href="blog-single.html">design</a>
                                <a href="blog-single.html">development</a>
                                <a href="blog-single.html">CSS3</a>
                                <a href="blog-single.html">photography</a>
                                <a href="blog-single.html">print</a>
                                <a href="blog-single.html">HTML5</a>
                            </div>
                        </li><!-- .widget_tag_cloud end -->

                        <!-- text_widget start -->
                        <li class="widget widget_text">
                            <div class="title">
                                <h5>text widget</h5>
                            </div>

                            <p>
                                Lorem ipsum dolor sit amet nec, 
                                consectetuer adipiscing elit. Aenean 
                                commodo ligula eget dolor. Aenean
                                massa. Cum sociis natoque penatibus 
                                et magnis dis parturient montes.
                            </p>

                        </li><!-- .widget_text end -->

                        <!-- .widget_categories start -->
                        <li class="widget widget_recent_comments">
                            <div class="title">
                                <h5>recent comments</h5>
                            </div>

                            <ul id="recent_comments">
                                <li>admin on
                                    <a href="blog-single.html">This is a sticky blog post with image</a>
                                </li>
                                <li>
                                    pixel-industry on
                                    <a href="blog-single.html">Blog post can have a gallery</a>
                                </li>
                                <li>
                                    my name on 
                                    <a href="blog-single.html">You can display video too</a>
                                </li>
                                <li>
                                    admin on 
                                    <a href="blog-single.html">Or maybe include some cool audio track</a>
                                </li>
                                <li>
                                    admin on 
                                    <a href="blog-single.html">This is a blog post with quote</a>
                                </li>
                                <li>
                                    pixel-industry on 
                                    <a href="blog-single.html">This is a classic blog post with text</a>
                                </li>
                            </ul>  
                        </li><!-- .widget_recent_entries end -->

                    </ul><!-- .aside_widgets end -->
                </aside> <!-- aside right end -->
            </div><!-- .container_12 end -->
        </section><!-- #content-wrapper end -->

        <!-- #footer-wrapper start -->
        <div id="footer-wrapper" class="clearfix">

            <!-- #footer -->
            <footer id="footer" class="container_12">

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    
                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">

                        <section class="carousel-article">
                            <img src="/img/red/logo-footer.png" alt="logo" />

                            <br /><br />

                            <ul id="foo1" class="carousel-li">
                                <li>
                                    <p>
                                        We proudly present you Metropolis, perfectly 
                                        clean and original theme. This is sliding 
                                        article, yo you can put more info about your 
                                        company.  
                                    </p>
                                </li>

                                <li>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error 
                                        sit voluptatem accusantium doloremque laudantium, 
                                        totam rem aperiam, eaque ipsa quae ab illo 
                                        inventore veritatis et quasi. 
                                    </p>
                                </li>

                                <li>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error 
                                        sit voluptatem accusantium doloremque laudantium, 
                                        totam rem aperiam, eaque ipsa quae ab illo 
                                        inventore veritatis et quasi. 
                                    </p>
                                </li>
                            </ul>

                            <div class="clearfix"></div>

                            <div class="carousel-pagination" id="foo1_pag"></div>
                        </section>

                    </li><!-- .widget.widget_text end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    <!-- .widget pi_recent_posts start -->
                    <li class="widget pi_recent_posts">
                        <div class="title">
                            <h5>latest posts</h5>
                        </div>

                        <ul class="footer-blog">
                            <li>
                                <div class="meta">
                                    <a class="icon-edit"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html"> Nam libero tempore, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">0 COMMENTS</a></p>
                                </div>
                            </li>

                            <li>
                                <div class="meta">
                                    <a class="icon-link"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html">Temporibus autem quibusdam, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                </div>
                            </li>

                            <li>
                                <div class="meta">
                                    <a class="icon-camera"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html">Excepteur sint occaecat cupid, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                </div>
                            </li>
                        </ul>


                    </li><!-- .widget pi_recent_posts end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    
                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">
                        <div class="title">
                            <h5>get in touch</h5>
                        </div>
                        <p>
                            If you have any questions don't hesitate to contact us
                        </p>

                        <br />

                        <ul class="contact-info">
                            <li class='address'>
                                <p>Address: Some street 123, Manhattan, New York, USA</p>
                            </li>

                            <li class="phone">
                                <p>Telephone: +00 123 5874</p>
                            </li>

                            <li class="mail">
                                <p>Email: <a href='mailto:sales-info@business.com'>info@business.com</a></p>
                            </li>
                        </ul>
                    </li><!-- .widget.widget_text end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    
                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">
                        <div class="title">
                            <h5>newsletter subscribe</h5>
                        </div>

                        <p>
                            Stay up to date with latest news from our company. 
                            We promise we won’t spam you.
                        </p>

                        <br />

                        <form class="newsletter">
                            <input type="email" class="email" placeholder="Enter your email here...">
                            <input type ="submit" class="submit" value="SEND">
                        </form>
                    </li><!-- .widget.widget_text end -->

                </ul><!-- footer-widget-container end -->
            </footer><!-- #footer end -->

            <!-- .container_12.copyright-container start -->
            <div class="container_12 copyright-container">
                
                <!-- .grid_12 start -->
                <div class="grid_12">                  

                    <div class="grid_6 alpha">
                        <p>
                            Copyright Metropolis 2013. Designed by Pixel industry. All rights reserved.
                        </p>
                    </div>

                    <div class="grid_6 omega">
                        <ul class="footer-breadcrumbs">
                            <li>
                                <a href="index.html">Home</a>
                            </li>

                            <li>
                                <a href="about.html">About</a>
                            </li>

                            <li>
                                <a href="portfolio1.html">Portfolio</a>
                            </li>

                            <li>
                                <a href="blog.html">Blog</a>
                            </li>

                            <li>
                                <a href="contact.html">Contact</a>
                            </li>
                        </ul>
                    </div><!-- .grid_6 omega end -->
                </div><!-- .grid_12 end -->
            </div><!-- .container_12.copyright-container end -->
        </div><!-- #footer-wrapper end -->
        
        <!-- scripts -->
        <script  src="/js/jquery-1.8.3.js"></script> <!-- jQuery library -->  
        <script  src="/js/jquery.placeholder.min.js"></script><!-- jQuery placeholder fix for old browsers -->
        <script  src="/js/jquery.carouFredSel-6.0.0-packed.js"></script><!-- CarouFredSel carousel plugin -->
        <script  src="/sharre/jquery.sharrre-1.3.4.min.js"></script>
        <script  src="/js/jquery.touchSwipe-1.2.5.js"></script><!-- support for touch swipe on mobile devices -->
        <script  src="/style-switcher/styleSwitcher.js"></script><!-- Style Switcher plugin -->
        <script  src="/js/include.js"></script> <!-- jQuery custom options -->

        <script>
            /* <![CDATA[ */
            // NEWSLETTER FORM AJAX SUBMIT
            $('.newsletter .submit').on('click', function(event){
                event.preventDefault();
                var email = $('.email').val();
                var form_data = new Array({ 'Email' : email});
                $.ajax({
                    type: 'POST',
                    url: "contact.php",
                    data: ({'action': 'newsletter', 'form_data' : form_data})
                }).done(function(data) {
                    alert(data);
                });
            });
            
            // COMMENT FORM AJAX SUBMIT
            $('#commentform #comment-reply').on('click', function(event){
                event.preventDefault();
                var name = $('#comment-name').val();
                var email = $('#comment-email').val();
                var message = $('#comment-message').val();
                var form_data = new Array({'Name' : name, 'Email' : email, 'Message' : message});
                $.ajax({
                    type: 'POST',
                    url: "contact.php",
                    data: ({'action': 'comment', 'form_data' : form_data})
                }).done(function(data) {
                    alert(data);
                });
            });

            //JQUERY SHARRE PLUGIN
            $('#shareme').sharrre({
                share: {
                    twitter: true,
                    facebook: true,
                    googlePlus: true
                },
                template: '<div class="box"><div class="left">Share</div><div class="middle"><a href="#" class="facebook">f</a><a href="#" class="twitter">t</a><a href="#" class="googleplus">+1</a></div><div class="right">{total}</div></div>',
                enableHover: false,
                enableTracking: true,
                render: function(api, options) {
                    $(api.element).on('click', '.twitter', function() {
                        api.openPopup('twitter');
                    });
                    $(api.element).on('click', '.facebook', function() {
                        api.openPopup('facebook');
                    });
                    $(api.element).on('click', '.googleplus', function() {
                        api.openPopup('googlePlus');
                    });
                }
            });

            // TESTIMONIAL CAROUSEL
            $("#foo2").carouFredSel({
                auto: true,
                scroll: 1,
                swipe: {
                    ontouch: true,
                    onMouse: true
                },
                width: 'variable',
                height: 'variable',
                items:{
                    width: 'auto',
                    visible: 1
                }
            });


            // FOOTER CAROUSEL ARTICLE 
            $("#foo1").carouFredSel({
                auto: true,
                scroll: 1,
                pagination: "#foo1_pag",
                swipe: {
                    ontouch: true,
                    onMouse: true
                },
                width: 'variable',
                height: 'variable',
                items: {
                    width: 'auto',
                    visible: 1
                }
            });
            /* ]]> */
        </script>
    </body>
</html>
